@charset "utf-8";
*{
    margin:0;
    padding:0;
}
body{
    background: #302e2e;
}
.container{
    width:200px;
    margin:200px 50px 0 300px;
    float:left;
}
//水平向右展开
.btn{
    width:100px;
    height:40px;
    line-height:40px;
    text-align: center;
    border:2px solid yellow;
    position:relative;
    color:#fff;
    border-radius: 10px;
    margin-left:100px;
    overflow: hidden;
    .box{
        width:104px;
        height:44px;
        position:absolute;
        top:-2px;
        left:-104px;
        background:yellow;
        border-radius: 10px;
        transition:all 1s;
        z-index:-1;
    }
}
.btn:hover{
    
    .box{
        transform:translateX(100px);
    }
    color:#000;
}
//垂直向下展开
.btn1{
    @extend .btn;
    border:2px solid lightgreen;
    margin-top:30px;
    .box1{
        @extend .box;
        top:-104px;
        left:0;
        background:lightgreen;
        z-index:-1;
    }
}
.btn1:hover{
    
    .box1{
        transform:translateY(104px);
    }
    color:#000;
}
//两边向中间展开
.btn2{
    @extend .btn;
    border:2px solid skyblue;
    margin-top: 30px;
    .box2{
        width:52px;
        height:44px;
        background: skyblue;
        position: absolute;
        top:0;
        left:-52px;
        z-index:-1;
        transition:all 1s;
    }
    .box3{
        @extend .box2;
        left:104px;
    }
}
.btn2:hover{
    .box2{
        transform:translateX(52px);
    }
    .box3{
        transform:translateX(-52px);
    }
}
// 水平向左展开
.btn3{
    @extend .btn;
    border:2px solid palevioletred;
    margin-top: 30px;
    .box4{
        @extend .box;
        top:-2px;
        left:104px;
        background: palevioletred;
    }
}
.btn3:hover{
    .box4{
        transform:translateX(-104px);
    }
     color:#000;
}

.center{
    width:120px;
    height:600px;
    float:left;
    margin:200px 10px 0 0;
}
.btn5{
    width:100px;
    height:40px;
    line-height:40px;
    text-align: center;
    border:2px solid fuchsia;
    position:relative;
    color:#fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom:30px;
    .box5{
        width:104px;
        height:44px;
        position:absolute;
        top:44px;
        left:0;
        background:fuchsia;
        border-radius: 10px;
        transition:all 1s;
        z-index:-1;
    }
 }
 .btn5:hover{
    .box5{
        transform:translateY(-45px);
    }
    color:#000;
 }
//  垂直方向上中间向外展开
 .btn6{
     @extend .btn5;
     border:2px solid salmon;
     .box6{
         @extend .box5;
         height:22px;
         top:44px;
         left:0;
         background:salmon;
         border-radius: 10px 10px 0 0 ;
     }
     .box7{
         @extend .box5;
         height:22px;
         top:-22px;
         left:0;
         background:salmon;
         border-radius: 0 0 10px 10px;
     }
 }
 .btn6:hover{
     .box6{
         transform:translateY(-44px);
     }
     .box7{
         transform:translateY(44px);
     }
 }
// 垂直方向上中间向l展里开
.btn7{
    @extend .btn5;
    border:2px solid red;
    .box8{
        @extend .box5;
        height:22px;
        top:-24px;
        left:0;
        background:red;
        border-radius: 10px 10px 0 0;
    }
    .box9{
        @extend .box5;
        height:22px;
        top:44px;
        left:0;
        background:red;
        border-radius: 0 0 10px 10px ;
    }
}
.btn7:hover{
    .box8{
        transform:translateY(24px);
    }
    .box9{
        transform:translateY(-22px);
    }
}
// 水平方向上中间向外展开
.btn8{
    @extend .btn5;
    border:2px solid slateblue;
    .box10{
        @extend .box5;
        width:52px;
        left:-54px;
        top:-2px;
        background:slateblue;
        border-radius:10px 0 0 10px;
        }
    .box11{
        @extend .box5;
        width:52px;
        left:154px;
        top:-2px;
        background: slateblue;
        border-radius: 0 10px 10px 0;
    }
}
.btn8:hover{
    .box10{
        transform: translateX(52px);
    }
    .box11{
        transform:translateX(-104px);
    }
}
.content{
    width:200px;
    height:600px;
    margin:200px 0 0 50px;
    float:left;
}
.skew{
    width:100px;
    height:40px;
    line-height:40px;
    text-align: center;
    border:2px solid darkcyan;
    position:relative;
    color:#fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom:30px;
     .trans{
        width:104px;
        height:44px;
        position:absolute;
        top:44px;
        left:-108px;
        background:darkcyan;
        border-radius: 10px;
        transition:all 1s;
        z-index:-1;
    }
}
.skew:hover{
    .trans{
         transform:translateX(106px) translateY(-44px);
    }
   
}
.skew1{
    @extend .skew;
    border:2px solid sandybrown;
    .trans1{
        @extend .trans;
        top:-2px;
        left:108px;
        transform: skew(-30deg);
        background: sandybrown;
    }
}
.skew1:hover{
    .trans1{
        transform:translateX(-108px);
    }
}
.skew2{
    @extend .skew;
    border:2px solid slateblue;
    .trans2{
        @extend .trans;
        top:-2px;
        left:-112px;
        transform: skew(30deg);
        background: slateblue;
    }
}
.skew2:hover{
    .trans2{
        transform:translateX(108px);
    }
}